feat: Interactively customize CSS variables #163
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
houndci-bot
reviewed
May 30, 2019
| @@ -0,0 +1,3 @@ | |||
| /*! Pickr 0.6.1 MIT | https://github.com/Simonwep/pickr */ | |||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);var o={};n.r(o),n.d(o,"once",function(){return s}),n.d(o,"on",function(){return a}),n.d(o,"off",function(){return c}),n.d(o,"createElementFromString",function(){return p}),n.d(o,"removeAttribute",function(){return u}),n.d(o,"createFromTemplate",function(){return h}),n.d(o,"eventPath",function(){return d}),n.d(o,"adjustableInputNumbers",function(){return f});n(0);function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){r(t,e,n[e])})}return t}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}const s=(t,e,n,o)=>a(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},o),a=l.bind(null,"addEventListener"),c=l.bind(null,"removeEventListener");function l(t,e,n,o){let r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]);for(const s of e)for(const e of n)s[t](e,o,i({capture:!1},r));return Array.prototype.slice.call(arguments,1)}function p(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function u(t,e){const n=t.getAttribute(e);return t.removeAttribute(e),n}function h(t){return function t(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=u(e,"data-con"),i=u(e,"data-key");i&&(n[i]=e);const r=o?n[o]={}:n;for(let n of Array.from(e.children)){const e=u(n,"data-arr");e?(r[e]||(r[e]=[])).push(n):t(n,r)}return n}(p(t))}function d(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function f(t){let e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];const n=t=>t>="0"&&t<="9"||"-"===t||"."===t;function o(o){const i=t.value,r=t.selectionStart;let s=r,a="";for(let t=r-1;t>0&&n(i[t]);t--)a=i[t]+a,s--;for(let t=r,e=i.length;t<e&&n(i[t]);t++)a+=i[t];if(a.length>0&&!isNaN(a)&&isFinite(a)){const n=o.deltaY<0?1:-1,r=[1,10,100][Number(o.shiftKey||2*o.ctrlKey)]*n;let c=Number(a)+r;!e&&c<0&&(c=0);const l=i.substr(0,s)+c+i.substring(s+a.length,i.length),p=s+String(c).length;t.value=l,t.focus(),t.setSelectionRange(p,p)}o.preventDefault(),t.dispatchEvent(new Event("input"))}a(t,"focus",()=>a(window,"wheel",o,{passive:!1})),a(t,"blur",()=>c(window,"wheel",o))}function v(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,i=!1,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(o=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);o=!0);}catch(t){i=!0,r=t}finally{try{o||null==a.return||a.return()}finally{if(i)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}const m=Math.min,y=Math.max,g=Math.floor,b=Math.round;function _(t,e,n){e/=100,n/=100;let o=g(t=t/360*6),i=t-o,r=n*(1-e),s=n*(1-i*e),a=n*(1-(1-i)*e),c=o%6;return[255*[n,s,r,r,a,n][c],255*[a,n,n,s,r,r][c],255*[r,r,a,n,n,s][c]]}function w(t,e,n){let o,i,r;const s=m(t/=255,e/=255,n/=255),a=y(t,e,n),c=a-s;if(0===c)o=i=0;else{i=c/a;let r=((a-t)/6+c/2)/c,s=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?o=l-s:e===a?o=1/3+r-l:n===a&&(o=2/3+s-r),o<0?o+=1:o>1&&(o-=1)}return[360*o,100*i,100*(r=a)]}function k(t,e,n,o){return e/=100,n/=100,[...w(255*(1-m(1,(t/=100)*(1-(o/=100))+o)),255*(1-m(1,e*(1-o)+o)),255*(1-m(1,n*(1-o)+o)))]}function A(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function C(t){return w(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function S(t){t=t.match(/^[a-zA-Z]+$/)?function(t){const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let o;for(const s in e)if(o=e[s].exec(t))switch(s){case"cmyk":{let t=v(n(o),5),e=t[1],i=t[2],r=t[3],a=t[4];if(e>100||i>100||r>100||a>100)break;return{values:[...k(e,i,r,a),1],type:s}}case"rgba":{let t=v(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>255||i>255||r>255||c<0||c>1)break;return{values:[...w(e,i,r),c],type:s}}case"hex":{const t=(t,e)=>[t.substring(0,e),t.substring(e,t.length)];let e,n=v(o,2)[1];if(3===n.length?n+="F":6===n.length&&(n+="FF"),4===n.length){var i=v(t(n,3).map(t=>t+t),2);n=i[0],e=i[1]}else if(8===n.length){var r=v(t(n,6),2);n=r[0],e=r[1]}return e=parseInt(e,16)/255,{values:[...C(n),e],type:s}}case"hsla":{let t=v(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||r>100||c<0||c>1)break;return{values:[...A(e,i,r),c],type:s}}case"hsva":{let t=v(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||r>100||c<0||c>1)break;return{values:[e,i,r,c],type:s}}}return{values:null,type:null}}function O(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;const i=Math.ceil,r={h:t,s:e,v:n,a:o,toHSVA(){const t=[r.h,r.s,r.v],e=t.map(i);return t.push(r.a),t.toString=(()=>"hsva(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(r.a.toFixed(1),")")),t},toHSLA(){const t=function(t,e,n){let o=(2-(e/=100))*(n/=100)/2;return 0!==o&&(e=1===o?0:o<.5?e*n/(2*o):e*n/(2-2*o)),[t,100*e,100*o]}(r.h,r.s,r.v),e=t.map(i);return t.push(r.a),t.toString=(()=>"hsla(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(r.a.toFixed(1),")")),t},toRGBA(){const t=_(r.h,r.s,r.v),e=t.map(i);return t.push(r.a),t.toString=(()=>"rgba(".concat(e[0],", ").concat(e[1],", ").concat(e[2],", ").concat(r.a.toFixed(1),")")),t},toCMYK(){const t=function(t,e,n){const o=_(t,e,n),i=o[0]/255,r=o[1]/255,s=o[2]/255;let a,c,l,p;return[100*(c=1===(a=m(1-i,1-r,1-s))?0:(1-i-a)/(1-a)),100*(l=1===a?0:(1-r-a)/(1-a)),100*(p=1===a?0:(1-s-a)/(1-a)),100*a]}(r.h,r.s,r.v),e=t.map(i);return t.toString=(()=>"cmyk(".concat(e[0],"%, ").concat(e[1],"%, ").concat(e[2],"%, ").concat(e[3],"%)")),t},toHEXA(){const t=(e=r.h,n=r.s,o=r.v,_(e,n,o).map(t=>b(t).toString(16).padStart(2,"0")));var e,n,o;return t.toString=(()=>{const e=r.a>=1?"":Number((255*r.a).toFixed(0).toString(16).toUpperCase(),2,"0");return"#".concat(t.join("").toUpperCase()+e)}),t},clone:()=>O(r.h,r.s,r.v,r.a)};return r}function x(t){const e={options:Object.assign({lockX:!1,lockY:!1,onchange:()=>0},t),_tapstart(t){a(document,["mouseup","touchend","touchcancel"],e._tapstop),a(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove(t){const n=e.options,o=e.cache,i=n.element,r=e.options.wrapper.getBoundingClientRect();let s=0,a=0;if(t){const e=t&&t.touches&&t.touches[0];s=t?(e||t).clientX:0,a=t?(e||t).clientY:0,s<r.left?s=r.left:s>r.left+r.width&&(s=r.left+r.width),a<r.top?a=r.top:a>r.top+r.height&&(a=r.top+r.height),s-=r.left,a-=r.top}else o&&(s=o.x*r.width,a=o.y*r.height);n.lockX||(i.style.left="calc(".concat(s/r.width*100,"% - ").concat(i.offsetWidth/2,"px)")),n.lockY||(i.style.top="calc(".concat(a/r.height*100,"% - ").concat(i.offsetWidth/2,"px)")),e.cache={x:s/r.width,y:a/r.height},n.onchange(s,a)},_tapstop(){c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;const o=e.options.wrapper.getBoundingClientRect();e._tapmove({clientX:o.left+t,clientY:o.top+n})},destroy(){const t=e.options,n=e._tapstart;c([t.wrapper,t.element],"mousedown",n),c([t.wrapper,t.element],"touchstart",n,{passive:!1})}},n=e.options,o=e._tapstart;return a([n.wrapper,n.element],"mousedown",o),a([n.wrapper,n.element],"touchstart",o,{passive:!1}),e}function E(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=a(t.elements,"click",e=>{t.elements.forEach(n=>n.classList[e.target===n?"add":"remove"](t.className)),t.onchange(e)});return{destroy:()=>c(...e)}}function j(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,i=!1,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(o=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);o=!0);}catch(t){i=!0,r=t}finally{try{o||null==a.return||a.return()}finally{if(i)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var B=t=>{let e=t.components,n=t.strings,o=t.useAsButton,i=t.inline,r=t.appClass;const s=t=>t?"":'style="display:none" hidden',a=h('\n <div data-key="root" class="pickr">\n\n '.concat(o?"":'<button type="button" data-key="button" class="pcr-button"></button>','\n\n <div data-key="app" class="pcr-app ').concat(r||"",'" ').concat(i?'style="position: unset"':"",'>\n <div class="pcr-selection" ').concat(s(e.palette),'>\n <div data-con="preview" class="pcr-color-preview" ').concat(s(e.preview),'>\n <button type="button" data-key="lastColor" class="pcr-last-color"></button>\n <div data-key="currentColor" class="pcr-current-color"></div>\n </div>\n\n <div data-con="palette" class="pcr-color-palette">\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="palette" class="pcr-palette"></div>\n </div>\n\n <div data-con="hue" class="pcr-color-chooser" ').concat(s(e.hue),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-hue pcr-slider"></div>\n </div>\n\n <div data-con="opacity" class="pcr-color-opacity" ').concat(s(e.opacity),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n </div>\n </div>\n\n <div class="pcr-swatches ').concat(e.palette?"":" pcr-last",'" data-key="swatches"></div> \n\n <div data-con="interaction" class="pcr-interaction" ').concat(s(Object.keys(e.interaction).length),'>\n <input data-key="result" class="pcr-result" type="text" spellcheck="false" ').concat(s(e.interaction.input),'>\n\n <input data-arr="options" class="pcr-type" data-type="HEXA" value="HEXA" type="button" ').concat(s(e.interaction.hex),'>\n <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBA" type="button" ').concat(s(e.interaction.rgba),'>\n <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLA" type="button" ').concat(s(e.interaction.hsla),'>\n <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVA" type="button" ').concat(s(e.interaction.hsva),'>\n <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(s(e.interaction.cmyk),'>\n\n <input data-key="save" class="pcr-save" value="').concat(n.save||"Save",'" type="button" ').concat(s(e.interaction.save),'>\n <input data-key="clear" class="pcr-clear" value="').concat(n.clear||"Clear",'" type="button" ').concat(s(e.interaction.clear),">\n </div>\n </div>\n </div>\n ")),c=a.interaction;return c.options.find(t=>!t.hidden&&!t.classList.add("active")),c.type=(()=>c.options.find(t=>t.classList.contains("active"))),a};function L(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}class P{constructor(t){L(this,"_initializingActive",!0),L(this,"_recalc",!0),L(this,"_color",O()),L(this,"_lastColor",O()),L(this,"_swatchColors",[]),L(this,"_eventListener",{swatchselect:[],change:[],save:[],init:[]}),this.options=t=Object.assign({appClass:null,useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,inline:!1,default:"#42445A",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},t);const e=t,n=e.swatches,o=e.inline,i=e.components,r=e.position;i.interaction||(i.interaction={});const s=i.preview,a=i.opacity,c=i.hue,l=i.palette;i.palette=l||s||a||c,o&&(t.showAlways=!0),this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),n&&n.length&&n.forEach(t=>this.addSwatch(t));const p=this._root.button,u=this;requestAnimationFrame(function e(){if(null===p.offsetParent&&p!==document.body)return requestAnimationFrame(e);u.setColor(t.default),u._nanopop=function(t){let e=t.el,n=t.reference,o=t.pos,i=t.padding,r=void 0===i?8:i;const s={start:"sme",middle:"mse",end:"ems"},a={top:"tb",right:"rl",bottom:"bt",left:"lr"},c=j(o.split("-"),2),l=c[0],p=c[1],u=void 0===p?"middle":p,h="top"===l||"bottom"===l;return{update(){const t=n.getBoundingClientRect(),o=e.getBoundingClientRect(),i=h?{t:t.top-o.height-r,b:t.bottom+r}:{r:t.right+r,l:t.left-o.width-r},c=h?{s:t.left+t.width-o.width,m:-o.width/2+(t.left+t.width/2),e:t.left}:{s:t.bottom-o.height,m:t.bottom-t.height/2-o.height/2,e:t.bottom-t.height};function p(t,n,i){const r="top"===i,s=r?o.height:o.width,a=window[r?"innerHeight":"innerWidth"];for(const o of t){const t=n[o];if(t>0&&t+s<a){e.style[i]="".concat(t,"px");break}}}p(s[u],c,h?"left":"top"),p(a[l],i,h?"top":"left")}}}({reference:u._root.button,el:u._root.app,pos:r}),u._rePositioningPicker(),t.defaultRepresentation&&(u._representation=t.defaultRepresentation,u.setColorRepresentation(u._representation)),t.showAlways&&u.show(),u._initializingActive=!1,u._emit("init")})}_preBuild(){const t=this.options;"string"==typeof t.el&&(t.el=t.el.split(/>>/g).reduce((t,e,n,o)=>(t=t.querySelector(e),n<o.length-1?t.shadowRoot:t),document)),this._root=B(t),t.useAsButton&&(this._root.button=t.el),document.body.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(document.body.removeChild(e.root),t.inline){const n=t.el.parentElement;n.lastChild===t.el?n.appendChild(e.app):n.insertBefore(e.app,t.el.nextSibling)}else document.body.appendChild(e.app);t.useAsButton||t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,n={palette:x({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange(n,o){if(!e.palette)return;const i=t._color,r=t._root,s=t.options;i.s=n/this.wrapper.offsetWidth*100,i.v=100-o/this.wrapper.offsetHeight*100,i.v<0&&(i.v=0);const a=i.toRGBA().toString();this.element.style.background=a,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(i.a,"), transparent),\n linear-gradient(to left, hsla(").concat(i.h,", 100%, 50%, ").concat(i.a,"), rgba(255, 255, 255, ").concat(i.a,"))\n "),s.comparison||(r.button.style.color=a,s.useAsButton||(r.preview.lastColor.style.color=a)),r.preview.currentColor.style.color=a,t._recalc&&t._updateOutput(),r.button.classList.remove("clear")}}),hue:x({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange(o,i){e.hue&&e.palette&&(t._color.h=i/this.wrapper.offsetHeight*360,this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),n.palette.trigger())}}),opacity:x({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange(n,o){e.opacity&&e.palette&&(t._color.a=Math.round(o/this.wrapper.offsetHeight*100)/100,this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),t.components.palette.trigger())}}),selectable:E({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}_bindEvents(){const t=this._root,e=this.options,n=[a(t.interaction.clear,"click",()=>this._clearColor()),a(t.preview.lastColor,"click",()=>this.setHSVA(...this._lastColor.toHSVA())),a(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),a(t.interaction.result,["keyup","input"],t=>{this._recalc=!1,this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),a([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0)];if(!e.showAlways){const o=e.closeWithKey;n.push(a(t.button,"click",()=>this.isOpen()?this.hide():this.show()),a(document,"keyup",t=>this.isOpen()&&(t.key===o||t.code===o)&&this.hide()),a(document,["touchstart","mousedown"],e=>{this.isOpen()&&!d(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers&&f(t.interaction.result,!1),!e.inline){let t=null;const e=this;n.push(a(window,["scroll","resize"],()=>{e.isOpen()&&(null===t?(t=setTimeout(()=>t=null,100),requestAnimationFrame(function n(){e._rePositioningPicker(),null!==t&&requestAnimationFrame(n)})):(clearTimeout(t),t=setTimeout(()=>t=null,100)))}))}this._eventBindings=n}_rePositioningPicker(){this.options.inline||this._nanopop.update()}_updateOutput(){if(this._root.interaction.type()){const t="to".concat(this._root.interaction.type().getAttribute("data-type"));this._root.interaction.result.value="function"==typeof this._color[t]?this._color[t]().toString():""}this._initializingActive||this._emit("change",this._color)}_clearColor(){const t=this._root,e=this.options;e.useAsButton||(t.button.style.color="rgba(0, 0, 0, 0.15)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._initializingActive||this._emit("save",null)}_emit(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),o=1;o<e;o++)n[o-1]=arguments[o];this._eventListener[t].forEach(t=>t(...n,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const n=this._eventListener[t];if(n){const t=n.indexOf(e);~t&&n.splice(t,1)}return this}addSwatch(t){const e=S(t).values;if(e){const t=this._swatchColors,n=this._root,o=O(...e),i=p('<button type="button" style="color: '.concat(o.toRGBA(),'"></button>'));return n.swatches.appendChild(i),t.push({element:i,hsvaColorObject:o}),this._eventBindings.push(a(i,"click",()=>{this.setHSVA(...o.toHSVA(),!0),this._emit("swatchselect",o)})),!0}return!1}removeSwatch(t){if("number"==typeof t){const e=this._swatchColors[t];if(e){const n=e.element;return this._root.swatches.removeChild(n),this._swatchColors.splice(t,1),!0}}return!1}applyColor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=this._root,n=e.preview,o=e.button,i=this._color.toRGBA().toString();n.lastColor.style.color=i,this.options.useAsButton||(o.style.color=i),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}destroy(){this._eventBindings.forEach(t=>c(...t)),Object.keys(this.components).forEach(t=>this.components[t].destroy())}destroyAndRemove(){this.destroy();const t=this._root.root;t.parentElement.removeChild(t);const e=this._root.app;e.parentElement.removeChild(e);const n=this;Object.keys(n).forEach(t=>n[t]=null)}hide(){return this._root.app.classList.remove("visible"),this}show(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:360,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];const r=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||o<0||o>1)return!1;const s=this.components,a=s.hue,c=s.opacity,l=s.palette,p=a.options.wrapper.offsetHeight*(t/360);a.update(0,p);const u=c.options.wrapper.offsetHeight*o;c.update(0,u);const h=l.options.wrapper,d=h.offsetWidth*(e/100),f=h.offsetHeight*(1-n/100);return l.update(d,f),this._color=O(t,e,n,o),this._recalc=r,this._recalc&&this._updateOutput(),i||this.applyColor(),!0}setColor(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;const n=S(t),o=n.values,i=n.type;if(o){const t=i.toUpperCase(),n=this._root.interaction.options,r=n.find(e=>e.getAttribute("data-type").startsWith(t));if(r&&!r.hidden)for(const t of n)t.classList[t===r?"add":"remove"]("active");return this.setHSVA(...o,e)}}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(e=>e.getAttribute("data-type").startsWith(t)&&!e.click())}getColorRepresentation(){return this._representation}getColor(){return this._color}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}P.utils=o,P.create=(t=>new P(t)),P.version="0.6.1";e.default=P}]).default}); | |||
Contributor
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
'for of' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
A leading decimal point can be confused with a dot: '.5'.
Expected an assignment or function call and instead saw an expression.
Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (n)
Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (r, t, n)
Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (t)
Missing semicolon.
Too many errors. (66% scanned).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #142
Intentionally only opening this up to the
--primaryand--primary-lightvariables for now. Could do them all in the future, but we'll want to (a) group them into sections, (b) detect when each variable is different from its default, and (c) offer the ability to revert to default (therefore removing the CSS variable from the custom CSS config entirely).Most use cases really only need
--primaryand--primary-lightto get going (that's all we customized for WiCHacks, plus some additional header CSS) so I think this is a good place to start.